<template>
    <!-- 个人中心 -->
    <div class="user">
        <!-- 用户信息（获赞、关注、粉丝、管理员or开发者标签） -->
        <div class="usercontent" v-if="user.info.userName">
            <!-- <userTx/>组件（更换头像、查看头像 -->
            <userTx :onBan="onBan" :load="userTxLoad" class="usertx"/>
            <!-- 跳转到userupdate路由（更新个人信息） -->
            <div class="username">
                <!-- 用户名 -->
                <div>{{user.info.userName}}</div>
                <!-- id -->
                <div v-if="user.studentId">ID：{{user.studentId}}</div>
                <!-- 游客标签 -->
                <van-tag type="primary" round v-if="user.info.root == 0">游客</van-tag>
                <!-- 开发者标签 -->
                <van-tag type="warning" round v-if="user.info.root == 2">管理员</van-tag>
                <!-- 超级管理员标签 -->
                <van-tag type="danger" round v-if="user.info.root == 3">超级管理员</van-tag>
            </div>

            <div class="setting" @click="$router.push('/setting')">
                <van-icon name="setting"></van-icon>
            </div>

            <!-- <div class="userxing">
                点击跳转toffafi组件
                <div @click="toffafi(0)">
                    粉丝数
                    <div>{{user.fans || 0}}</div>
                    粉丝
                    <div>粉丝</div>
                </div>

                <div @click="toffafi(1)">
                    <div>{{user.follow || 0}}</div>
                    <div>关注</div>
                </div>
                点击展示获赞个数
                <div @click="onPraise(user.praiseInt)">
                    <div>{{user.praiseInt || 0}}</div>
                    <div>获赞</div>
                </div>
            </div> -->
        </div>
        <!-- 主体功能 -->
        <div class="conter">
            <!-- 管理员特有有的功能 -->
            <div v-if="user.power > 0">
                <div class="title">管理员</div>
                <!-- 功能 -->
                <div class="content">
                    <van-grid :column-num="4" :border="false" clickable>
                        <van-grid-item @click="$Toast.fail('功能开发中')">
                            <van-image src="http://106.52.136.201:233/public/img/shenhe.png" width="33"/>
                            <div style="font-size: 12px;">内容审核</div>
                        </van-grid-item>
                        <van-grid-item icon="close" text="未通过" @click="$Toast.fail('功能开发中')"/>
                        <van-grid-item icon="friends-o" text="管理审核" @click="$Toast.fail('功能开发中')" v-if="user.power == 2"/>
                    </van-grid>
                </div>
            </div>

            <div>
                <div class="title">音乐中心</div>
                <div class="content">
                    <van-grid :column-num="4" :border="false" clickable>
                        <van-grid-item icon="like-o" to="/like?type=like&title=喜欢" :text="'喜欢(' + user.info.likeNum + ')'"/>
                        <van-grid-item icon="service-o" to="/songSheet" :text="'歌单(' + user.info.songSheetNum + ')'"/>
                    </van-grid>
                </div>
            </div>

            <div>
                <div class="title">用户中心</div>
                <div class="content">
                    <van-grid :column-num="4" :border="false" clickable>
                        <!-- <van-grid-item icon="upgrade" text="已发布" @click="$Toast.fail('功能开发中')"/> -->
                        <!-- <van-grid-item icon="todo-list-o" text="审核中" @click="$Toast.fail('功能开发中')"/> -->
                        <!-- <van-grid-item icon="todo-list-o" text="审核中" @click="$Toast.fail('功能开发中')"/> -->
                        <!-- <van-grid-item icon="phone-o" text="手机号" @click="$Toast.fail('功能开发中')"/> -->
                        <!-- <van-grid-item icon="contact" text="学号认证" @click="$Toast.fail('功能开发中')"/> -->
                        <van-grid-item icon="edit" text="修改密码"  @click="$router.push('/userUpdate?type=2')"/>
                        <van-grid-item icon="revoke" text="退出登录"  @click="onClear"/>
                    </van-grid>
                </div>
            </div>

            <div>
                <div class="title">系统工具</div>
                <div class="content">
                    <van-grid :column-num="4" :border="false" clickable>
                        <!-- <van-grid-item icon="friends-o" text="使用帮助" @click="$Toast.fail('功能开发中')"/> -->
                        <!-- <van-grid-item icon="scan" text="公众号" @click="$Toast.fail('功能开发中')"/> -->
                        <van-grid-item icon="replay" text="检查更新" @click="replay" v-if="Version.isApp"/>
                        <van-grid-item icon="down" text="下载客户端" @click="replay" v-else/>
                        <!-- <van-grid-item icon="envelop-o" text="意见反馈" @click="$Toast.fail('功能开发中')"/> -->
                    </van-grid>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import { inspect } from '@/api/version'
import { mapState, mapMutations } from 'vuex'
import userTx from '@/components/user/userTx.vue'
import { updateUserInfo } from '@/api/user'
export default {
    components : {
        [userTx.name] : userTx
    },
    data() {
        return {
            userTxLoad : false,
        }
    },
    computed : {
        ...mapState(['Version', 'user'])
    },
    created(){
        this.getUserInfo()
    },
    methods : {
        ...mapMutations(['getUserInfo']),

        // 检查更新
        replay(){
            inspect(1).then(res => {
                if(res.code == 200){
                    this.Version.data = res.data
                    this.$router.replace('/downClient')
                }
            })
        },


        // 退出登录
        onClear(){
            this.$Dialog.confirm({
                message: '确认退出登录吗？',
            }).then(() => {
                this.$Toast.success("退出成功")
                localStorage.removeItem('token')
                this.$router.push('/login')
            }).catch(()=>{})
        },

        // 进入用户修改信息页面
        toffafi(i){
            this.$router.push('/ffafi?type=' + i)
        },

        // 点击被赞
        onPraise(n){
            this.$Dialog.alert({
                message: '你以获得' + n + '个赞，再接再厉',
                theme: 'round-button',
            }).then(() => {
                // on close
            })
        },

        // 修改头像
        onBan(url, base64){
            this.userTxLoad = true
            var data = {}
            if (url == "base64") {
                data.headImageBase64 = base64;
            } else {
                data.headImage = url;
            }

            updateUserInfo(data).then(res => {
                this.userTxLoad = false
                this.getUserInfo()
            })
        },
    }
}
</script>

<style scoped>
.user{
    position: relative;
    height: calc(100vh - 50px);
    width: 100vw;
    overflow-y: auto;
}
.usercontent{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(45deg , #f3a557, #fc0b0b);
    color: #fff;
}
.setting{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 27px;
    color: #ddd;
}
.conter{
    position: relative;
    width: calc(100% - 20px);
    background: #fff;
    padding: 0 10px 20px 10px;
    margin-top: -25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.username{
    position: absolute;
    left: 115px;
    top: 40px;
}
.username > div{
    margin: 10px 0;
}
.username>div:nth-child(1){
    font-size: 16px;
}
.username>div:nth-child(2){
    font-size: 12px;
    color: #f3e3d3;
    margin-bottom: 5px;
}
.username>span{
    margin-right: 3px;
}
.conter>div{
    padding-top: 20px;
    width: 100%;
}
.conter .title{
    font-weight: 900;
}
.usertx{
    position: absolute;
    top: 25px;
    left: 25px;
}
.userxing{
    position: absolute;
    bottom: 25px;
    width: 100%;
    height: 50px;
}
.userxing>div{
    width: 33%;
    float: left;
    text-align: center;
}
.userxing>div>div:nth-child(1){
    font-size: 15px;
}
.userxing>div>div:nth-child(2){
    font-size: 12px;
}
</style>